<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var a = 1;
            $('button:first').click(function () {
                var addText = '<li>追加项' + (a++).toString() + '</li>';
                $('ul:first').append(addText);
            });
            $('button:eq(1)').click(function () {
                $('p:first').append('how');
            });
            $('button:eq(2)').click(function () {
                var addTr = '<tr><td>' + (a++) + '</td>';
                var add2 = "<td><input type='text' value='' /></td>";
                var add3 = "<td><select><option>asm_a1_10</option><option>asm_a1_20</option></select></td><tr>";
                $('table').append(addTr + add2 + add3);
            });
            $('button:eq(3)').click(function () {
                $('p').prepend('<u>the javascript!</u>');
                var addText = '<li>追加项' + (a++).toString() + '</li>';
                $('ul:first').prepend(addText);
            });
            $('button:eq(4)').click(function(){
                $('p').after('<i>黑色幽默</i>');
                var addText = '<li>追加项' + (a++).toString() + '</li>';
                $('ul:first').after(addText);
            });
            $('button:eq(5)').click(function(){
                $('p').before('<i>黑色幽默</i>');
                var addText = '<li>追加项' + (a++).toString() + '</li>';
                $('ul:first').before(addText);
            });
        });
    </script>
</head>
<div>
    <p>测试文本</p>
    <ul>
        <li>append() - 在被选元素的结尾插入内容</li>
        <li> prepend() - 在被选元素的开头插入内容</li>
        <li> after() - 在被选元素之后插入内容</li>
        <li>before() - 在被选元素之前插入内容</li>
    </ul>
    <table>
        <thead>
            <td>序号</td>
            <td>名称</td>
            <td>对应字段</td>
        </thead>
        <tr>
            <td>1</td>
            <td><input type="text" value="标示" /></td>
            <td><select>
                <option>asm_a1_10</option>
                <option>asm_a1_20</option>
            </select>
            </td>
        </tr>
    </table>
    <button>在元素末尾追加（内部追加）项</button>
    <button>元素末尾追加文本（内部追加）</button>
    <button>在表格末尾追加行</button>
    <button>在元素之前追加元素(内部追加)</button>

    <button>在元素末尾追加（元素外）</button>
    <button>在元素开头追加（元素外）</button>
</div>

</html>